/**
 * 前端JavaScript应用
 * 处理用户交互和API通信
 */
class CatDogApp {
  constructor() {
    this.apiBase = '/api';                      // API基础路径
    this.maxFileSize = 10 * 1024 * 1024;       // 最大文件大小10MB
    this.supportedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp'];
    
    this.initializeElements();                  // 初始化DOM元素
    this.bindEvents();                         // 绑定事件监听器
    this.loadModelInfo();                      // 加载模型信息
  }

  /**
   * 初始化DOM元素引用
   */
  initializeElements() {
    this.uploadArea = document.getElementById('uploadArea');
    this.fileInput = document.getElementById('imageFile');
    this.uploadForm = document.getElementById('uploadForm');
    this.submitBtn = document.getElementById('submitBtn');
    this.previewDiv = document.getElementById('preview');
    this.resultDiv = document.getElementById('result');
  }

  /**
   * 绑定事件监听器
   */
  bindEvents() {
    // 点击上传区域触发文件选择
    this.uploadArea.addEventListener('click', () => {
      this.fileInput.click();
    });

    // 文件选择事件
    this.fileInput.addEventListener('change', () => {
      this.handleFileSelect();
    });

    // 拖拽上传事件
    this.uploadArea.addEventListener('dragover', (e) => {
      e.preventDefault();
      this.uploadArea.classList.add('dragover');
    });

    this.uploadArea.addEventListener('dragleave', () => {
      this.uploadArea.classList.remove('dragover');
    });

    this.uploadArea.addEventListener('drop', (e) => {
      e.preventDefault();
      this.uploadArea.classList.remove('dragover');
      
      const files = e.dataTransfer.files;
      if (files.length > 0) {
        this.fileInput.files = files;
        this.handleFileSelect();
      }
    });

    // 表单提交事件
    this.uploadForm.addEventListener('submit', (e) => {
      e.preventDefault();
      this.handleSubmit();
    });
  }

  /**
   * 处理文件选择
   */
  handleFileSelect() {
    const file = this.fileInput.files[0];
    if (!file) return;

    // 验证文件
    const validation = this.validateFile(file);
    if (!validation.valid) {
      this.showError(validation.error);
      this.fileInput.value = '';
      return;
    }

    console.log('📁 选择的文件:', file.name, '大小:', (file.size/1024).toFixed(1) + 'KB');
    
    // 显示预览
    this.showPreview(file);
  }

  /**
   * 验证文件
   */
  validateFile(file) {
    // 检查文件大小
    if (file.size > this.maxFileSize) {
      return {
        valid: false,
        error: `文件大小不能超过${(this.maxFileSize/1024/1024).toFixed(0)}MB！请选择较小的图片文件。`
      };
    }

    // 检查文件类型
    if (!this.supportedTypes.includes(file.type)) {
      return {
        valid: false,
        error: '请选择有效的图片文件（JPG、PNG、WEBP格式）！'
      };
    }

    return { valid: true };
  }

  /**
   * 显示图片预览
   */
  showPreview(file) {
    const reader = new FileReader();
    reader.onload = (e) => {
      this.previewDiv.innerHTML = `
        <div class="fade-in">
          <h3 style="text-align: center; margin-bottom: 20px; color: #333;">📷 图片预览</h3>
          <img src="${e.target.result}" class="preview" alt="预览图片">
          <p style="text-align: center; margin-top: 15px; color: #666; font-size: 14px;">
            文件名: ${file.name} | 大小: ${(file.size/1024).toFixed(1)}KB
          </p>
        </div>
      `;
    };
    reader.readAsDataURL(file);
  }

  /**
   * 处理表单提交
   */
  async handleSubmit() {
    // 验证是否选择了文件
    if (!this.fileInput.files[0]) {
      this.showError('请先选择一张图片！');
      return;
    }

    // 创建FormData
    const formData = new FormData();
    formData.append('image', this.fileInput.files[0]);

    // 更新UI状态
    this.setLoading(true);
    this.resultDiv.innerHTML = '';

    const startTime = Date.now();

    try {
      console.log('🚀 开始发送预测请求...');
      
      // 发送预测请求
      const response = await fetch(`${this.apiBase}/predict`, {
        method: 'POST',
        body: formData
      });

      const result = await response.json();
      const processingTime = Date.now() - startTime;

      console.log('📊 预测结果:', result);

      if (result.success) {
        this.showSuccess(result, processingTime);
      } else {
        this.showError(result.error);
      }

    } catch (error) {
      console.error('❌ 请求失败:', error);
      this.showError(`网络请求失败: ${error.message}`);
    } finally {
      this.setLoading(false);
    }
  }

  /**
   * 显示成功结果
   */
  showSuccess(result, processingTime) {
    const confidence = result.probability * 100;
    const emoji = result.className === 'cat' ? '🐱' : '🐶';
    const animal = result.className === 'cat' ? '猫咪' : '狗狗';
    const winnerClass = result.className;

    this.resultDiv.innerHTML = `
      <div class="result success bounce-in">
        <h3>${emoji} 识别结果：${animal}</h3>
        
        <div class="confidence-bar">
          <div class="confidence-fill" style="width: ${confidence}%">
            置信度 ${confidence.toFixed(1)}%
          </div>
        </div>
        
        <div class="details-grid">
          <div class="detail-item ${winnerClass === 'cat' ? 'winner' : ''}">
            <strong>🐱 猫咪概率</strong>
            <div class="detail-value">${(result.probabilities.cat * 100).toFixed(1)}%</div>
          </div>
          <div class="detail-item ${winnerClass === 'dog' ? 'winner' : ''}">
            <strong>🐶 狗狗概率</strong>
            <div class="detail-value">${(result.probabilities.dog * 100).toFixed(1)}%</div>
          </div>
        </div>
        
        <div class="tech-details">
          <strong>🔬 技术详情</strong>
          <ul>
            <li><strong>模型版本:</strong> ${result.modelInfo.version}</li>
            <li><strong>特征维度:</strong> ${result.modelInfo.features}维特征向量</li>
            <li><strong>处理时间:</strong> ${processingTime}ms</li>
            <li><strong>原始预测值:</strong> ${result.rawPrediction ? result.rawPrediction.toFixed(4) : 'N/A'}</li>
            <li><strong>文件信息:</strong> ${result.fileInfo.originalName}</li>
          </ul>
          <p style="margin-top: 15px; font-style: italic; color: #888;">
            💡 该模型使用RGB均值、标准差、亮度分布、边缘密度、饱和度、色调方差等16个特征进行综合判断
          </p>
        </div>
      </div>
    `;
  }

  /**
   * 显示错误信息
   */
  showError(errorMessage) {
    this.resultDiv.innerHTML = `
      <div class="result error fade-in">
        <h3>❌ 识别失败</h3>
        <p><strong>错误原因:</strong> ${errorMessage}</p>
        <div style="margin-top: 20px; padding: 15px; background: rgba(255,255,255,0.7); border-radius: 10px;">
          <p style="margin-bottom: 10px; color: #666;"><strong>💡 解决建议:</strong></p>
          <ul style="margin-left: 20px; color: #666;">
            <li>确保图片清晰且包含完整的猫或狗</li>
            <li>尝试使用JPG或PNG格式的图片</li>
            <li>检查图片文件是否损坏</li>
            <li>确保图片大小在10MB以内</li>
            <li>避免过度模糊或过暗的图片</li>
          </ul>
        </div>
      </div>
    `;
  }

  /**
   * 设置加载状态
   */
  setLoading(loading) {
    this.submitBtn.disabled = loading;
    if (loading) {
      this.submitBtn.innerHTML = '<div class="loading"></div>AI正在分析中...';
    } else {
      this.submitBtn.innerHTML = '🔍 开始智能识别';
    }
  }

  /**
   * 加载模型信息
   */
  async loadModelInfo() {
    try {
      const response = await fetch(`${this.apiBase}/model-info`);
      const result = await response.json();
      
      if (result.success) {
        console.log('📊 模型信息:', result.model);
        this.displayModelStatus(true, result.model);
      } else {
        console.warn('⚠️ 模型未加载:', result.error);
        this.displayModelStatus(false, null);
      }
    } catch (error) {
      console.error('❌ 获取模型信息失败:', error);
      this.displayModelStatus(false, null);
    }
  }

  /**
   * 显示模型状态
   */
  displayModelStatus(loaded, modelInfo) {
    const statusElement = document.createElement('div');
    statusElement.className = 'model-status';
    statusElement.style.cssText = `
      position: fixed;
      top: 20px;
      right: 20px;
      padding: 10px 15px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: bold;
      z-index: 1000;
      transition: all 0.3s ease;
    `;

    if (loaded) {
      statusElement.innerHTML = '✅ 模型已加载';
      statusElement.style.background = 'linear-gradient(135deg, #4caf50, #8bc34a)';
      statusElement.style.color = 'white';
      statusElement.title = `模型版本: ${modelInfo.version}, 特征数: ${modelInfo.features}`;
    } else {
      statusElement.innerHTML = '⚠️ 模型未加载';
      statusElement.style.background = 'linear-gradient(135deg, #ff9800, #f57c00)';
      statusElement.style.color = 'white';
      statusElement.title = '请先运行训练程序';
    }

    document.body.appendChild(statusElement);

    // 3秒后自动隐藏
    setTimeout(() => {
      statusElement.style.opacity = '0';
      setTimeout(() => {
        if (statusElement.parentNode) {
          statusElement.parentNode.removeChild(statusElement);
        }
      }, 300);
    }, 3000);
  }

  /**
   * 获取健康状态
   */
  async checkHealth() {
    try {
      const response = await fetch(`${this.apiBase}/health`);
      const result = await response.json();
      console.log('🏥 服务器健康状态:', result);
      return result;
    } catch (error) {
      console.error('❌ 健康检查失败:', error);
      return null;
    }
  }

  /**
   * 获取数据集统计
   */
  async getDatasetStats() {
    try {
      const response = await fetch(`${this.apiBase}/dataset-stats`);
      const result = await response.json();
      console.log('📊 数据集统计:', result);
      return result;
    } catch (error) {
      console.error('❌ 获取数据集统计失败:', error);
      return null;
    }
  }
}

/**
 * 页面加载完成后初始化应用
 */
document.addEventListener('DOMContentLoaded', () => {
  console.log('🚀 初始化猫狗识别应用...');
  
  // 创建应用实例
  const app = new CatDogApp();
  
  // 将应用实例挂载到全局对象，便于调试
  window.catDogApp = app;
  
  console.log('✅ 应用初始化完成');
  
  // 开发模式下的额外功能
  if (window.location.hostname === 'localhost') {
    console.log('🔧 开发模式已启用');
    
    // 添加键盘快捷键
    document.addEventListener('keydown', (e) => {
      // Ctrl+H 检查健康状态
      if (e.ctrlKey && e.key === 'h') {
        e.preventDefault();
        app.checkHealth();
      }
      
      // Ctrl+D 获取数据集统计
      if (e.ctrlKey && e.key === 'd') {
        e.preventDefault();
        app.getDatasetStats();
      }
    });
    
    console.log('💡 快捷键提示:');
    console.log('   Ctrl+H: 检查服务器健康状态');
    console.log('   Ctrl+D: 获取数据集统计信息');
  }
});

/**
 * 错误处理
 */
window.addEventListener('error', (e) => {
  console.error('💥 全局错误:', e.error);
});

window.addEventListener('unhandledrejection', (e) => {
  console.error('💥 未处理的Promise拒绝:', e.reason);
});